<template>
  <div class="lookupTestListsComp h100">
    <full-parent-dom-with-dask :loading="loadingTestTaskData"></full-parent-dom-with-dask>
    <h4 class="withVerticleLineT4 title14">{{ $t('strategy') + $t('testTask') }}</h4>
    <ul class="linkedTestTaskes">
      <li
        class="linkedTestTaskItem"
        :class="{ active: item.id === activeTaskId }"
        v-for="item in testTaskData"
        :key="item.id"
      >
        <div class="linkedTestTaskItemInnerBox">
          <icon-with-dropdown :record="item" @action="handleClickDropdownMenu"></icon-with-dropdown>
          <div class="tagName" @click="setActiveTask(item.id)">
            <table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.name"></table-ellipsis>
          </div>
        </div>
      </li>
    </ul>
    <div class="rightDrawerInnerBoxBottomline"></div>
  </div>
</template>
<script>
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import IconWithDropdown from '@/views/components/IconWithDropdown'
import taskApi from '@/api/modules/task'
import { mapGetters } from 'vuex'
export default {
  components: {
    FullParentDomWithDask,
    tableEllipsis,
    IconWithDropdown
  },
  props: {
    strategyId: {
      type: String,
      default: ''
    },
    type: {
      type: Number,
      default: 9
    },
    time: {
      type: Number,
      default: 7892144
    }
  },
  computed: {
    ...mapGetters(['drawerOpenTime'])
  },
  data () {
    return {
      loadingTestTaskData: false,
      testTaskData: [],
      activeTaskId: ''
    }
  },
  watch: {
    drawerOpenTime: {
      handler (val) {
        console.log(val, 'ssfsf')
        this.getData()
      },
      immediate: true
    }
  },
  methods: {
    // 获取升级策略的测试任务
    getData () {
      this.testTaskData = []
      this.activeTaskId = ''
      if (!this.strategyId) {
        return
      }
      this.loadingTestTaskData = true
      this.$store
        .dispatch('getTaskPageData', { strategyId: this.strategyId, type: this.type, pageSize: 100 })
        .then((res) => {
          if (res.data.length === 0) {
            this.$emit('clicktask', '')
            return
          }
          this.setActiveTask(res.data[0].id)
          this.testTaskData = res.data.map((item) => {
            return {
              id: item.id,
              name: item.name,
              status: item.status
            }
          })
        })
        .finally(() => {
          this.loadingTestTaskData = false
        })
    },
    // 设置当前任务
    setActiveTask (id) {
      if (this.activeTaskId === id) {
        return
      }
      this.activeTaskId = id
      this.$emit('clicktask', id)
    },
    handleClickDropdownMenu (obj) {
      if (this[obj.type]) {
        this[obj.type](obj.record, obj.other)
      }
    },
    handelCancel (record) {
      const vm = this
      // taskApi.cancelTask({ ids: [record.id] }).then(() => {
      //   vm.$message.success(vm.$t('successfullyOperation'))
      //   vm.getData()
      // })
    },
    // 挂起或者进行中
    handleStopStart (record, enabled) {
      const vm = this
      // taskApi.stopOrStart({ ids: [record.id], enabled: enabled }).then(() => {
      //   vm.$message.success(vm.$t('successfullyOperation'))
      //   vm.getData()
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.lookupTestListsComp {
  position: relative;

  display: flex;
  flex-direction: column;
  .withVerticleLineT4 {
    flex: none;
    margin-left: 24px;
  }
  .linkedTestTaskes {
    padding: 5px 0;
    flex: 1 0 0;
    overflow: auto;
    padding: 0 24px;
  }
  .linkedTestTaskItem {
    height: 42px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .linkedTestTaskItemInnerBox {
      position: relative;
    }
    .tagName {
      padding-left: 25px;
    }
    &.active {
      .tagName {
        color: @blockHoverTextColor;
      }
    }
  }
}
</style>
